<template>
  <h1 class="row-title">对话框示例一</h1>
  <div class="row">
    <Lgm-Button type="primary" @click="visible = true">对话框一</Lgm-Button>
    <Lgm-Button type="primary" @click="visible2 = true">对话框二</Lgm-Button>
    <Lgm-Button type="primary" @click="visible3 = true">对话框三</Lgm-Button>
  </div>
  <h1 class="row-title">对话框示例二</h1>
  <div class="row">
    <Lgm-Button type="primary" @click="visible4 = true">肯德基</Lgm-Button>
    <Lgm-Button type="primary" @click="visible5 = true">麦当劳</Lgm-Button>
  </div>
  <Lgm-Dialog v-model:visible="visible" @close="visible = false"> 这是一个基本的对话框 </Lgm-Dialog>
  <Lgm-Dialog
    v-model:visible="visible2"
    @close="visible2 = false"
    title="这是一个自定义标题"
    width="30vw"
    top="40vh"
  >
    这是一个基本的对话框
  </Lgm-Dialog>
  <Lgm-Dialog v-model:visible="visible3" @close="visible3 = false">
    这是一个基本的对话框
    <template #footer>
      <Lgm-Button @click="visible3 = false">取消</Lgm-Button>
      <Lgm-Button type="primary" @click="visible3 = false">确定</Lgm-Button>
    </template>
  </Lgm-Dialog>
  <Lgm-Dialog v-model:visible="visible4" @close="visible4 = false">
    <div class="dialog-flex">
      <img :src="global.kfc" alt="" class="dialog-img" />
    </div>
    <template #footer>
      <Lgm-Button @click="visible4 = false">取消</Lgm-Button>
      <Lgm-Button type="primary" @click="visible4 = false">确定</Lgm-Button>
    </template>
  </Lgm-Dialog>
  <Lgm-Dialog v-model:visible="visible5" @close="visible5 = false">
    <div class="dialog-flex">
      <img :src="global.mdl" alt="" class="dialog-img" />
    </div>
    <template #footer>
      <Lgm-Button @click="visible5 = false">取消</Lgm-Button>
      <Lgm-Button type="primary" @click="visible5 = false">确定</Lgm-Button>
    </template>
  </Lgm-Dialog>
</template>

<script setup>
import { ref } from 'vue'

// 控制对话框是否显示
const visible = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const visible5 = ref(false)

// 图片资源
const global = {
  kfc: new URL('@/assets/imgs/kfc.jpg', import.meta.url).href,
  mdl: new URL('@/assets/imgs/mdl.jpg', import.meta.url).href
}
</script>

<style lang="scss" scoped>
.dialog-flex {
  display: flex;
  justify-content: center;
}

.dialog-img {
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
</style>
